<ti-searchbox class="mb-4" (search)="onSearch($event)" [(ngModel)]="value"></ti-searchbox>

<ti-table
  [srcData]="srcData"
  [(displayedData)]="displayedData"
  [searchWords]="searchWords"
  [searchKeys]="searchKeys"
  (stateUpdate)="onStateUpdate($event)"
>
  <table>
    <thead>
      <tr>
        <th width="80px">{{columns[0].title}}</th>
        <th>{{columns[1].title}}</th>
        <th>{{columns[2].title}}</th>
        <th>
          <ti-cell-text>{{columns[3].title}}</ti-cell-text>
          <ti-head-sort [sortKey]="columns[3].sortKey"></ti-head-sort>
        </th>
        <th>{{columns[4].title}}</th>
      </tr>
    </thead>
    <tbody *ngIf="displayedData.length > 0 && !loading">
      <tr *ngFor="let row of displayedData; trackBy: trackByFn">
        <td>{{row.id}}</td>
        <td>{{row.firstName}}</td>
        <td>{{row.lastName}}</td>
        <td>{{row.age}}</td>
        <td>{{row.email}}</td>
      </tr>
    </tbody>
    <tbody *ngIf="loading">
      <tr>
        <td tiColspan style="height: 430px; text-align: center">
          <ti-loading size="middle"></ti-loading>
        </td>
      </tr>
    </tbody>
    <tbody *ngIf="displayedData.length === 0 && !loading">
      <tr class="ti3-table-nodata">
        <td tiColspan>暂无数据</td>
      </tr>
    </tbody>
  </table>
  <ti-pagination [(currentPage)]="currentPage" [pageSize]="pageSize" [(totalNumber)]="totalNumber"></ti-pagination>
</ti-table>
